<template>
  <div class="page">
    <div class="content">
      <div class="top"></div>
      <div class="cont">
        <div class="from-cont">
          <form id="dt-/static/depesit/-cont" action="" novalidate role="form">
            <div class="dt-desc">
              <div class="dt-desc-left">
                <span
                  v-if="!is_payment"
                  class="iconfont dt-icon icon-icon_safety"
                />

                <span
                  v-else
                  class="iconfont dt-icon"
                  :class="{
                    'icon-icon_roundclose': info.status != 1,
                    'icon-icon_safety': info.status == 1,
                  }"
                />
              </div>
              <div class="dt-desc-right">
                <p class="dt-desc-title" v-if="!is_payment">
                  {{ form_type == 2 ? "拼团成功" : "提交成功" }}
                </p>
                <p class="dt-desc-title" v-else>
                  <template v-if="form_type == 2">
                    {{ info.status == 1 ? "拼团成功" : "支付失败" }}
                  </template>
                  <template v-else>
                    {{ info.status == 1 ? "提交成功" : "支付失败" }}
                  </template>
                </p>

                <p class="dt-desc-sm">
                  {{ info.status == 1 ? "感谢您的购买" : "感谢您的支持" }}
                </p>
              </div>
            </div>
            <div class="dt-suc-title shadow-lg">
              <div class="dt-suc_cont">
                <div class="dt-form shadow-lg">
                  <div class="dt-form-row2" v-if="is_payment">
                    <div class="dt-form-row-rmb">￥</div>
                    <div class="dt-form-row-money">
                      {{ info.dep_amount | toFixed }}
                    </div>
                  </div>
                  <div
                    class="dt-form-row"
                    v-if="(info.status == 1 || !is_payment) && customer.user_id"
                  >
                    <div class="dt-form-row-cont" style="text-align: center">
                      <long-touch-wechat
                        :image="[4, 5].includes(customer.contact_type)"
                        :qrcode="qrcode"
                        @callback="adBehavior('copy')"
                      />
                    </div>
                    <div class="dt-form-row-title" style="color: red; font-size: 16px; text-align: center">
                      专属客服微信 (长按添加好友)
                    </div>
                  </div>
                  <template v-if="is_payment">
                    <div class="dt-form-feng"></div>
                    <div class="dt-form-row">
                      <div class="dt-form-row-title">订单号</div>
                      <div class="dt-form-row-cont dt-order-id">
                        {{ info.order_id }}
                      </div>
                    </div>
                    <div class="dt-form-row" v-if="info.status == 1">
                      <div class="dt-form-row-title">支付日期</div>
                      <div class="dt-form-row-cont dt-order-pay-date">
                        {{ info.pay_date }}
                      </div>
                    </div>
                    <div class="dt-form-row">
                      <div class="dt-form-row-title">支付方式</div>
                      <div class="dt-form-row-cont dt-order-pay-type">
                        {{ info.pay_type }}
                      </div>
                    </div>
                    <div class="dt-form-row">
                      <div class="dt-form-row-title">支付状态</div>
                      <div class="dt-form-row-cont dt-order-pay-stauts">
                        {{
                          info.status == 1 ? "已支付" : "订单未支付或在处理中"
                        }}
                      </div>
                    </div>
                    <!-- <div class="dt-form-row">
										<div class="dt-form-row-title">专属客服</div>
										<div class="dt-form-row-cont dt-order-user"></div>
									</div> -->
                  </template>
                </div>
                <div class="dt-copy" v-if="info.status == 1">
                  请截图发给您的专属客服
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { openWxApp } from "@/utils";
import { isWechat } from "@/utils/validate";
import LongTouchWechat from "@/components/long-touch-wechat";
import includeJs from "@/utils/include-js";
import tpl from "@/mixins/tpl";

export default {
  mixins: [tpl],
  components: {
    LongTouchWechat,
  },
  metaInfo: {
    title: "下定结果",
  },
  data() {
    return {
      info: {},
      showCopy: {},
      customer: {},
      is_payment: true,
      form_type: 0,
    };
  },
  computed: {
    qrcode() {
      const { contact_type, image_url, wxk_image_url, contact } = this.customer;
      if (contact_type == 4) {
        return image_url;
      }
      if (contact_type == 5) {
        return wxk_image_url;
      }
      return contact;
    },
  },
  created() {
    const { tg_id, tg_type, is_payment, form_type, status } = this.$route.query;
    this.is_payment = is_payment != 0;
    this.form_type = form_type || 0;
    if (this.is_payment) {
      this.getInfo();
    }
    this.getTplInfo(tg_id, tg_type).then(() => {
      console.log("SUCCESS1", status, this);
      if (status != "TRADE_SUCCESS") return;
      let isSome = this.behaviorList.some((v) => v.behavior_order);
      if (isSome) {
        this.behavior("order");
        return;
      }
      this.$nextTick(() => {
        includeJs.exec(
          `gdt('track', 'COMPLETE_ORDER', {'key1': 'value1', 'key2': 'value2'});`
        );
      });
    });
    this.getCus();
  },
  methods: {
    async getInfo() {
      const { merOrderId } = this.$route.query;
      if (!merOrderId) return;
      const data = await this.$api.getDepositData({
        merOrderId: merOrderId.substring(4),
      });
      this.info = data;
    },
    async getCus() {
      const { tg_id, tg_type } = this.$route.query;
      const data = await this.$api.getAdCustomer({ id: tg_id, type: tg_type });
      this.customer = data;
    },
    clickOutside() {
      this.showCopy = false;
    },
    longTouchWx() {
      this.showCopy = true;
    },
    touchstartQrcode() {
      if (isWechat || !this.wxkQrcode) return;
      this.$toast({
        message: "请在微信打开此链接",
        position: "top",
      });
    },
    longTouchQrcode() {
      if (!isWechat) return;
      openWxApp();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/pay.scss";
</style>
